<template>
	<view class="flex-col page">
		<view class="flex-row group">
			<view class="flex-col items-start flex-1 section ml-3">
				<text class="font text_3">订单号</text>
				<text class="font_2 text_4 mt-11 order-text">JT000066666</text>
			</view>

			<view class="flex-col items-start flex-1 section ml-3">
				<text class="font text_3">预计交货时间</text>
				<text class="font_2 text_4 mt-11 order-text">2023年3月31日下午</text>
			</view>
		</view>
		<view class="flex-row justify-between group_3">
			<view class="flex-row">
				<!-- <image class="step_left" src="../../static/step/step_left1.png" /> -->
				<image class="step_left" src="../../static/step/step_left2.png" />
				<!-- <image class="step_left" src="../../static/step/step_left3.png" />
        <image class="step_left" src="../../static/step/step_left4.png" /> -->
				<view class="ml-18 flex-col">
					<view class="flex-row items-center">
						<image class="image_3" src="../../static/step/step1_active.png" />
						<view class="ml-14 flex-col items-start">
							<text class="font_3 text_6">订单确认</text>
							<text class="mt-8 font_4 text_7">2023年3月26日 下午13:12</text>
						</view>
					</view>
					<view class="mt-24 flex-row items-center">
						<image class="image_3" src="../../static/step/step2_active.png" />
						<view class="ml-14 flex-col items-start">
							<text class="font_3">订单处理</text>
							<text class="mt-8 font_4 text_8">2023年3月26日</text>
						</view>
					</view>
					<view class="mt-24 flex-row items-center">
						<image class="shrink-0 image_3" src="../../static/step/step3.png" />
						<text class="ml-14 font_5 text_9">订单已发货</text>
					</view>
					<view class="mt-24 flex-row items-center">
						<image class="shrink-0 image_3" src="../../static/step/step4.png" />
						<text class="ml-14 font_5 text_10">订单已送达</text>
					</view>
				</view>
			</view>
			<!-- <view class="flex-col items-center self-start group_4">
        <text class="font_4">下午13:12</text>
        <text class="font_4 mt-53">下午1:22</text>
      </view> -->
		</view>
		<view class="flex-col group_5">
			<text class="self-start text_11">订单详情</text>
			<view class="flex-col self-stretch mt-21">
				<view class="flex-row justify-between mt-10 list-item section_2" v-for="(item, index) in items"
					:key="index">
					<view class="flex-row items-center order-detail-text">
						<image class="image_4" src="../../static/wx/184296b2a20fcbae859c11318de17fc0.png" />
						<view class="flex-col items-start ml-9 ">
							<text class="font text_12 order-detail-text">运动护膝运动护膝运动护膝运动护膝运动护膝运动护膝</text>
							<text class="font_7 mt-11">￥157</text>
						</view>
					</view>
					<view class="flex-col justify-start items-center self-start text-wrapper_2 view">
						<text class="font_6">2x</text>
					</view>
				</view>
			</view>
		</view>
		<view class="flex-row justify-between items-baseline group_6">
			<text class="font_2 text_15">总项目数</text>
			<text class="font_3 text_16">4</text>
		</view>
		<view class="flex-row justify-between items-baseline group_7">
			<text class="font_2 text_17">价格</text>
			<text class="font_3 text_18">￥412</text>
		</view>
		<view class="flex-row justify-between group_8">
			<text class="font_2 text_19">付款方式</text>
			<text class="font_3 text_20">线上支付</text>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {},
		data() {
			return {
				items: [null, null],
			};
		},

		methods: {},
	};
</script>

<style scoped lang="css">
	.ml-3 {
		margin-left: 6rpx;
	}

	.mt-53 {
		margin-top: 106rpx;
	}

	.mt-21 {
		margin-top: 42rpx;
	}

	.ml-9 {
		margin-left: 18rpx;
	}

	.mt-11 {
		margin-top: 22rpx;
	}

	.page {
		padding: 0 36rpx 80rpx 56rpx;
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.image {
		width: 48rpx;
		height: 44rpx;
	}

	.pos {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.text {
		color: #000000;
		font-size: 40rpx;
		font-family: Laila;
		font-weight: 700;
		line-height: 37.4rpx;
	}

	.group {
		margin-top: 64rpx;
	}

	.order_id {
		width: 300rpx;
	}

	.text-wrapper {
		padding: 40rpx 0 96rpx;
		background-color: #fbfbfd;
		border-radius: 32rpx;
		width: 202rpx;
	}

	.font {
		font-size: 28rpx;
		font-family: Mukta;
		line-height: 25.88rpx;
		font-weight: 700;
		color: #2d3142;
	}

	.text_2 {
		line-height: 26.18rpx;
	}

	.font_2 {
		font-size: 32rpx;
		font-family: Mukta;
		line-height: 30.24rpx;
		color: #2d3142;
	}

	.order-text {
		font-size: 28rpx;
	}

	.text_5 {
		line-height: 25.4rpx;
	}

	.pos_2 {
		position: absolute;
		right: 0;
		bottom: 43.04rpx;
	}

	.section {
		margin-right: 20rpx;
		padding: 30rpx;
		background-color: #fbfbfd;
		border-radius: 32rpx;
		height: 162rpx;
	}

	.text_3 {
		line-height: 26.66rpx;
	}

	.text_4 {
		line-height: 29.6rpx;
	}

	.group_3 {
		margin-top: 50rpx;
	}

	.step_left {
		width: 48rpx;
		height: 476rpx;
	}

	.image_3 {
		border-radius: 20rpx;
		width: 82rpx;
		height: 82rpx;
	}

	.font_3 {
		font-size: 32rpx;
		font-family: Mukta;
		line-height: 30.24rpx;
		font-weight: 700;
		color: #2d3142;
	}

	.text_6 {
		line-height: 30.2rpx;
	}

	.font_4 {
		font-size: 28rpx;
		font-family: Mukta;
		line-height: 25.88rpx;
		color: #9c9db9;
	}

	.text_7 {
		line-height: 25.9rpx;
	}

	.text_8 {
		line-height: 25.9rpx;
	}

	.font_5 {
		font-size: 32rpx;
		font-family: Mukta;
		line-height: 30.24rpx;
		font-weight: 700;
		color: #9c9eb9;
	}

	.text_9 {
		line-height: 30.36rpx;
	}

	.text_10 {
		line-height: 29.98rpx;
	}

	.group_4 {
		margin-right: 12rpx;
		margin-top: 48rpx;
	}

	.group_5 {
		margin-top: 64rpx;
	}

	.text_11 {
		color: #2d3142;
		font-size: 36rpx;
		font-family: Mukta;
		font-weight: 700;
		line-height: 33.98rpx;
	}

	.list-item {
		margin-right: 20rpx;
	}

	.list-item:first-child {
		margin-top: 0;
	}

	.section_2 {
		padding: 4rpx 16rpx;
		background-color: #f4f6fa;
		border-radius: 32rpx;
	}

	.image_4 {
		width: 106rpx;
		height: 138rpx;
	}

	.text_12 {
		line-height: 26.38rpx;

	}

	.font_7 {
		font-size: 24rpx;
		font-family: Mukta;
		line-height: 17.78rpx;
		color: #2d3142;
	}

	.text-wrapper_2 {
		padding: 16rpx 0;
		background-color: #dde2f080;
		border-radius: 14rpx;
		width: 44rpx;
		height: 44rpx;
		margin-top: 80rpx !important;
	}

	.view {
		margin-right: 26rpx;
		margin-top: 80rpx;
	}

	.font_6 {
		font-size: 24rpx;
		font-family: Mukta;
		line-height: 15.36rpx;
		color: #9c9db9;
	}

	.group_6 {
		margin-top: 56rpx;
	}

	.text_15 {
		line-height: 29.56rpx;
	}

	.text_16 {
		margin-right: 16rpx;
		line-height: 20.16rpx;
	}

	.group_7 {
		margin-top: 48rpx;
	}

	.text_17 {
		line-height: 29.72rpx;
	}

	.text_18 {
		margin-right: 16rpx;
		line-height: 23.62rpx;
	}

	.group_8 {
		margin-top: 48rpx;
	}

	.text_19 {
		line-height: 29.66rpx;
	}

	.text_20 {
		margin-right: 16rpx;
	}

	.order-detail-text {
		width: 500rpx;
	}
</style>